<template>
	<view class="bgw box-radius u-p-l-28 u-p-r-28 u-font-24">
		<view class="u-flex u-border-bottom u-p-t-20 u-p-b-20 u-col-top u-m-b-15">
			<view class="u-flex-1">
				<view class="u-tips-color u-m-b-10">
					订单号：{{detail.rent_house_order_sn}}
				</view>
				<view class="u-tips-color">
					房源编号：{{detail.house_sn}}
				</view>
			</view>
			<view class="color-primary">
				{{detail.status_label}}
			</view>
		</view>
		<view class="u-m-b-15">
			<text class="u-font-28">{{detail.house_title}}</text>
			<text class="u-font-24">（{{detail.min_area_title}}）</text>
		</view>
		<view class="u-p-b-15">
			<view class=" u-p-b-10 u-content-color" v-if="detail.dong_sn||detail.unit_sn||detail.layer_sn||detail.house_sn">
				具体地址：{{detail.dong_sn}}栋{{detail.unit_sn}}单元{{detail.layer_sn}}层{{detail.house_sn}}
			</view>
			<view class=" u-p-b-10 u-content-color" v-if="detail.addr">
				具体地址：{{detail.addr}}
			</view>
			<view class="u-p-b-10 u-content-color">
				<text>出租方式：{{detail.chuzu_label}}</text>
				<text class="u-p-l-20">身份：{{detail.order_user_type_label}}</text>
			</view>
			<view class="u-p-b-10 u-content-color u-flex">
				<text class="">定金：</text>
				<text class="color-orange">￥{{Number(detail.dingjin_price)}}</text>
				<text class="u-tips-color" v-if="detail.is_need_pay_dingjin == 1">（待支付）</text>
			</view>
			<template v-if="action">
				<view class="u-p-b-10 u-content-color u-flex">
					<text class="">服务费：</text>
					<template v-if="detail.order_user_type_id == 1">
						<text class="color-orange">￥{{Number(detail.buy_service_price)}}</text>
						<text class="u-tips-color" v-if="detail.is_need_pay_buy_other_price == 1">（待支付）</text>
						<!-- <u-icon name="checkbox-mark" size="24" color="#19be6b" v-if="detail.is_need_pay_service_price == 2"></u-icon> -->
					</template>
					<template v-if="detail.order_user_type_id == 2">
						<text class="color-orange">￥{{Number(detail.sell_service_price)}}</text>
						<text class="u-tips-color" v-if="detail.is_need_pay_sell_service_price == 1">（待支付）</text>
						<!-- <u-icon name="checkbox-mark" size="24" color="#19be6b" v-if="detail.is_need_pay_service_price == 2"></u-icon> -->
					</template>
				</view>
				<view class="u-p-b-10 u-content-color">
					<text>租金：</text>
					<text class="color-orange">￥{{Number(detail.zujin_price)}}/月</text>
					<text class="u-tips-color" v-if="detail.is_need_pay_zujin_price == 1">（待支付）</text>
					<!-- <u-icon name="checkbox-mark" size="24" color="#19be6b" v-if="detail.is_need_pay_zujin_price == 2"></u-icon> -->
					<text class="u-p-l-30">押金：</text>
					<text class="color-orange">￥{{Number(detail.yajin_price)}}</text>
					<text class="u-tips-color" v-if="detail.is_need_pay_yajin_price == 1">（待支付）</text>
					<!-- <u-icon name="checkbox-mark" size="24" color="#19be6b" v-if="detail.is_need_pay_yajin_price == 2"></u-icon> -->
				</view>
			</template>
		</view>
		<view class="u-flex u-p-b-14 u-p-t-14  u-border-top item-action-box" v-if="action">
			<view class="u-tips-color u-flex-1">
				{{detail.created_at_label}}
			</view>
			<!-- status 状态【1-已取消2-待签约3-待支付4-租住中5-已成交】 -->
			<u-button @click="toDetail" size="mini" shape="circle" class="u-m-l-16 btn-grey">查看详情</u-button>
			
			<view class="u-m-l-16" v-if="pickerArray.length>1">
				<picker @change="bindPickerChange" :value="0" :range="pickerArray" range-key="label">
					<u-button style="pointer-events: none;" type="primary" size="mini" shape="circle">支付</u-button>
				</picker>
			</view>
			<view class="u-m-l-16" v-if="pickerArray.length == 1">
				<template v-if="pickerArray[0].pay_type == 'toDetail'">
					<u-button @click="toDetail" type="primary" size="mini" shape="circle">支付</u-button>
				</template>
				<template v-else>
					<u-button @click="payOrder(pickerArray[0])" type="primary" size="mini" shape="circle">支付{{pickerArray[0].label}}</u-button>
				</template>
			</view>
			<template v-if="detail.status != 1"> 
				<view class="u-m-l-16">
					<link-tel :link-user-type="2" :house-id="detail.house_id" :house-type="3">
						<u-button style="pointer-events: none;"type="primary" size="mini" shape="circle">联系管家</u-button>
					</link-tel>
				</view>
			</template>
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin,
		modal,
		uniRequestPayment
	} = proxy.$util;
	const emit = defineEmits(['refresh']);
	const props = defineProps({
		action: {
			type: Boolean,
			default: true,
		},
		from: {
			type: String,
			default: 'user', // user用户   guan管家中心
		},
		detail: {
			type: Object,
			default: {},
		}
	})
	const pickerArray = computed(() => {
		let arr = [];
		//支付类型【1-会员开通2-支付定金7-其余剩余费用(租客)8-其余剩余费用(房东)】
		if (props.detail.is_need_pay_dingjin == 1) {
			arr.push({
				label: '定金',
				pay_type: 2,
				pay_price: props.detail.dingjin_price
			})
		}
		if(props.detail.order_user_type_id == 1 && props.detail.is_need_pay_buy_other_price == 1){
			arr.push({
				label: '剩余费用',
				pay_type: 'toDetail'
			})
		}
		if(props.detail.order_user_type_id == 2 && props.detail.is_need_pay_sell_other_price == 1){
			arr.push({
				label: '剩余费用',
				pay_type: 'toDetail'
			})
		}
		return arr
		// if (props.detail.is_need_pay_service_price == 1) {    
		// 	let pay_price = '';
		// 	let pay_type = ''
		// 	if (props.detail.order_user_type_id == 1) {
		// 		// 租客
		// 		pay_type = 4
		// 		pay_price = props.detail.buy_service_price
		// 	}
		// 	if (props.detail.order_user_type_id == 2) {
		// 		pay_type = 5
		// 		pay_price = props.detail.sell_service_price
		// 	}
		// 	arr.push({
		// 		label: '服务费',
		// 		pay_type,
		// 		pay_price
		// 	})
		// }
		// if (props.detail.is_need_pay_zujin_price == 1) {
		// 	arr.push({
		// 		label: '租金',
		// 		pay_type: 3,
		// 		pay_price: props.detail.zujin_price
		// 	})
		// }
		// if (props.detail.is_need_pay_yajin_price == 1) {
		// 	arr.push({
		// 		label: '押金',
		// 		pay_type: 6,
		// 		pay_price: props.detail.yajin_price
		// 	})
		// }
		// return arr
	})
	const bindPickerChange = (e) => {
		let data = pickerArray.value[e.detail.value];
		if(data.pay_type == 'toDetail'){
			toDetail()
			return;
		}
		payOrder(data)
	}
	const payOrder = (data) => {
		let {
			label,
			pay_type,
			pay_price
		} = data;
		let title = '确定支付该租房的' + label + '：￥' + pay_price + ' ？';
		modal(title).then(() => {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			proxy.$u.api.rentPayPrice({
				rent_house_order_sn: props.detail.rent_house_order_sn,
				pay_type,
				pay_price
			}).then(res => {
				let {
					code,
					msg,
					data
				} = res;
				if (code == 200) {
					let {
						pay_data,
						rent_house_order_sn
					} = data;
					if(msg == '微信支付未开通，测试阶段，模拟支付成功' || !pay_data){
						modal({
							content: msg,
							showCancel: false
						})
						emit('refresh');
						return;
					}
					uniRequestPayment(pay_data).then(res => {
						emit('refresh');
					}).catch(res => {

					})
					// emit('refresh');
					// modal({
					// 	content: msg,
					// 	showCancel: false
					// })
				} else {
					modal({
						content: msg,
						showCancel: false
					})
				}
			})
		}).catch(() => {

		})
	}
	const toDetail = () => {
		navLogin('/pagesSub/orderRentDetail/orderRentDetail', {
			sn: props.detail.rent_house_order_sn
		})
	}
</script>

<style lang="scss" scoped>

</style>